<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>ArcGISDynamicMapService</title>
        <link rel="shortcut icon" href="img/favicon.png">
        <link rel="stylesheet" type="text/css" href="http://202.203.132.223/arcgis_js_v38_api/arcgis_js_api/library/3.8/3.8/js/esri/css/esri.css" />
        <script src="http://202.203.132.223/arcgis_js_v38_api/arcgis_js_api/library/3.8/3.8/init.js"></script>
        <link rel="stylesheet" type="text/css" href="css/add1.css">
        <link rel="stylesheet" type="text/css" href="css/nav.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/font.css">
        <link rel="stylesheet" href="css/7b66cb1a.main.css">

        <style>
          #DivFeature {
                width: 365px;
                height: 247px;
                margin-left: 5px;
                margin-top: 15px;
            }
          #SelectAdd{padding-top:0px !important;}
        </style>
        <script>
            var map;
            var newGraphic=null;
            var selectedTemplate;
            var newAttributes
            var myGraphicLayer;
            var myLayer=null;
            var myGraphic=null;
            var myJson={};
            var landusePointLayer=null;

              require([
                "esri/map",
                "esri/toolbars/draw",
                "esri/toolbars/edit",
                "esri/graphic",
                "esri/config",

                "esri/layers/FeatureLayer",

                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",

                "esri/dijit/editing/TemplatePicker",

                "dojo/_base/array",
                "dojo/_base/event",
                "dojo/_base/lang",
                "dojo/parser",
                "dijit/registry",

                "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
                "dijit/form/Button", "dojo/domReady!"
              ], function(
                Map, Draw, Edit, Graphic, esriConfig,
                FeatureLayer,
                SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
                TemplatePicker,
                arrayUtils, event, lang, parser, registry
              ) {
                parser.parse();

                // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/jshelp/ags_proxy.html
                esriConfig.defaults.io.proxyUrl = "/proxy/";

                // This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
                esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://202.203.132.223:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");

                var opts={//extent:new esri.geometry.Extent({
                    //"xmin":103.6,
                    //"ymin":28.5,
                    //"xmax":104.2,
                    //"ymax":32.3,
                    //"spatialReference":{"wkid":4326},
                  //}),
                  center: [103.96,27.83],
                  zoom:13  
                };

                map = new Map("mymap",opts);

                map.on("layers-add-result", initEditing);

                var osmLayer=new esri.layers.OpenStreetMapLayer();
                map.addLayer(osmLayer); //0

                //var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer");
                //map.addLayer(myTiledMapServiceLayer);

                //var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer ("http://202.203.132.223:6080/arcgis/rest/services/subset_new/MapServer"); 
                //map.addLayer(tiledLayer);

                var dynamiclayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://202.203.132.223:6080/arcgis/rest/services/subset_/MapServer");
                map.addLayer(dynamiclayer);

                var myInfoTemplate=new esri.InfoTemplate("${Name}","名称：${Name},${Village}");

                //var landuseLineLayer = new FeatureLayer("http://202.203.132.223:6080/arcgis/rest/services/test/FeatureServer/3", {
                    //mode: FeatureLayer.MODE_SNAPSHOT,
                    //infoTemplate:myInfoTemplate,
                    //outFields: ["*"]
                //});

                landusePointLayer = new FeatureLayer("http://202.203.132.223:6080/arcgis/rest/services/test/FeatureServer/0", {
                    mode: FeatureLayer.MODE_SNAPSHOT,
                    infoTemplate:myInfoTemplate,
                    outFields: ["*"]
                });

                map.addLayers([landusePointLayer]);
                //map.addLayers([landusePointLayer, landuseLineLayer]);
                 //var myPoint=new esri.geometry.Point(104,24.8);
                //map.centerAt(myPoint);
                //map.centerAndZoom(myPoint,11);
                
                //var opener=window.opener;
                //var url=location.href;
               // var evt=url.evt; 
                //alert(url);
                var jump=GetRequest();
                if(jump!=null){
                    newAttributes = {};
                    newAttributes.Name=null;
                    newAttributes.Village=null;
                    newAttributes.Population=null;
                    newAttributes.Labor=null;
                    newAttributes.Reason=null;
                    newAttributes.PhoneNumbe=null;
                    newAttributes.Supporters=null;
                    newAttributes.Supporte_1=null;
                    newAttributes.PovertySta=null;

                    //point symbol
                    var pointSymbol=new esri.symbol.SimpleMarkerSymbol();
                    pointSymbol.style=esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE;
                    pointSymbol.setSize(12);
                    pointSymbol.setColor(new dojo.Color("#FFFFCC"));
                    var myPoint=new esri.geometry.Point(jump["longitude"],jump["latitude"]);
                    //var graphic = new esri.Graphic(myPoint, pointSymbol);
                    var graphic=new esri.Graphic();
                    graphic.setGeometry(myPoint);
                    //graphic.setInfoTemplate(InfoTemplate); 
                    graphic.setSymbol(pointSymbol);

                    myGraphicLayer=new esri.layers.GraphicsLayer();
                    map.addLayer(myGraphicLayer);
                    myGraphicLayer.add(graphic); //用默认的图层添加
                    map.centerAt(myPoint);
                    newGraphic = new Graphic(graphic.geometry, null, newAttributes);
                }

                function GetRequest() { 
                    var url = location.search; //获取url中"?"符后的字串    
                    var theRequest = new Object();    
                    if (url.indexOf("?") != -1) {       
                        var str = url.substr(1);       
                        strs = str.split("&"); 
                        for(var i = 0; i < strs.length; i ++) { 
                            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 
                        }    
                    }
                    var lon=theRequest["longitude"];
                    var lat=theRequest["latitude"];
                    if(lon==null||lat==null) return null;
                    else return theRequest; 
                } 

                function initEditing(evt) {
                    console.log("initEditing", evt);

                    // var map = this;
                    var currentLayer = null;
                    var layers = arrayUtils.map(evt.layers, function(result) {
                        return result.layer;
                    });
                    console.log("layers", layers);

                    var editToolbar = new Edit(map);
                    editToolbar.on("deactivate", function(evt) {
                    currentLayer.applyEdits(null, [evt.graphic], null);
                });

                arrayUtils.forEach(layers, function(layer) {
                    var editingEnabled = false;
                    layer.on("dbl-click", function(evt) {
                        event.stop(evt);
                        if (editingEnabled === false) {
                            editingEnabled = true;
                            editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
                        } else {
                            currentLayer = this;
                            editToolbar.deactivate();
                            editingEnabled = false;
                        }
                    });

                    layer.on("click", function(evt) {
                        var attr=evt.graphic.attributes; 
                        myLayer=layer;
                        myGraphic=evt.graphic;
                        dojo.byId("Name").value=attr["Name"];
                        dojo.byId("Village").value=attr["Village"];
                        dojo.byId("Population").value=attr["Population"];
                        dojo.byId("Labor").value=attr["Labor"]
                        dojo.byId("Reason").value=attr["Reason"]
                        dojo.byId("PhoneNumber").value=attr["PhoneNumbe"]
                        dojo.byId("Supporters").value=attr["Supporters"]
                        dojo.byId("SupportersInstitution").value=attr["Supporte_1"]


                        //var id=dojo.byId("PovertyState");
                        //var option=id.options;
                        //var value=id.value;
                        //var selected=option[value-1].innerHTML;
                        //newAttributes["PovertySta"]=selected;
                    
                        event.stop(evt);
                        if (evt.ctrlKey === true || evt.metaKey === true) {  //delete feature if ctrl key is depressed
                            layer.applyEdits(null,null,[evt.graphic]);
                            currentLayer = this;
                            editToolbar.deactivate();
                            editingEnabled=false;
                        }
                    });
                });
                //创建要素模板
                var templatePicker = new TemplatePicker({
                    featureLayers: layers,
                    rows: "auto",
                    columns: 2,
                    grouping: true,
                    style: "height: auto; overflow: auto;"
                }, "DivFeature");

                templatePicker.startup();

                var drawToolbar = new Draw(map);

                templatePicker.on("selection-change", function() {
                    if( templatePicker.getSelected() ) {
                      selectedTemplate = templatePicker.getSelected();
                    }
                    switch (selectedTemplate.featureLayer.geometryType) {
                      case "esriGeometryPoint":
                        drawToolbar.activate(Draw.POINT);
                        break;
                      case "esriGeometryMultipoint":
                        drawToolbar.activate(Draw.MULTI_POINT);
                        break;
                      case "esriGeometryPolyline":
                        drawToolbar.activate(Draw.POLYLINE);
                        break;
                      case "esriGeometryPolygon":
                        drawToolbar.activate(Draw.POLYGON);
                        break;
                    }
                });

                drawToolbar.on("draw-end", function(evt) {
                    drawToolbar.deactivate();
                    editToolbar.deactivate();
                    newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
                    //point symbol
                    var pointSymbol=new esri.symbol.SimpleMarkerSymbol();
                    pointSymbol.style=esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE;
                    pointSymbol.setSize(12);
                    pointSymbol.setColor(new dojo.Color("#FFFFCC"));
                    var graphicpoint = new esri.Graphic(evt.geometry, pointSymbol); 
                    myGraphicLayer=new esri.layers.GraphicsLayer();
                    map.addLayer(myGraphicLayer);
                    myGraphicLayer.add(graphicpoint); //用默认的图层添加
                    newGraphic = new Graphic(evt.geometry, null, newAttributes);
                    //selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
                });
                    dojo.connect(dojo.byId('save'),'onclick',mySavePoint);
                    dojo.connect(dojo.byId('cancel'),'onclick',myCancelSave);
                    dojo.connect(dojo.byId('reset'),'onclick',myResetText);
                    //dojo.connect(dojo.byId('saveChange'),'onclick',mySaveChange);
                }

                function mySaveChange(){
                    var flag=false;//判断各个字段内容是否有改变
                    if(dojo.byId("Name").value==""){
                        alert("名字不能为空！！");
                        return;
                    }
                    if(myGraphic==null){
                        alert("请先选择元素！");
                        return;
                    }
                    newAttributes=myGraphic.attributes;
                    if(newAttributes["Name"]!=dojo.byId("Name").value){
                        alert("名字不同，不能修改！");
                        return;
                    }
                    if(dojo.byId("Village").value!=newAttributes["Village"]){
                        newAttributes["Village"]=dojo.byId("Village").value;
                        flag=true;
                    }
                    if(dojo.byId("Population").value!=newAttributes["Population"]){
                        if(dojo.byId("Population").value>=0 && dojo.byId("Population").value<=100){
                            newAttributes["Population"]=dojo.byId("Population").value;
                            flag=true;
                        }
                        else{
                            alert("请输入数字！");
                            return;
                        }                       
                    }
                    if(dojo.byId("Labor").value!=newAttributes["Labor"]){
                        newAttributes["Labor"]=dojo.byId("Labor").value;
                        flag=true;
                        if(dojo.byId("Labor").value>=0 && dojo.byId("Labor").value<=100){
                            newAttributes["Labor"]=dojo.byId("Labor").value;
                            flag=true;
                        }
                        else{
                            alert("请输入数字！");
                            return;
                        }   
                    }
                    var id=dojo.byId("PovertyState");
                    var option=id.options;
                    var value=id.value;
                    var selected=option[value-1].innerHTML;
                    if(newAttributes["PovertySta"]!=selected){
                        newAttributes["PovertySta"]=selected
                        flag=true;
                    }
                    if(dojo.byId("Reason").value!=newAttributes["Reason"]){
                        newAttributes["Reason"]=dojo.byId("Reason").value;
                        flag=true;
                    }
                    if(dojo.byId("PhoneNumber").value!=newAttributes["PhoneNumbe"]){
                        newAttributes["PhoneNumbe"]=dojo.byId("PhoneNumber").value;
                        flag=true;
                    }
                    if(dojo.byId("Supporters").value!=newAttributes["Supporters"]){
                        newAttributes["Supporters"]=dojo.byId("Supporters").value;
                        flag=true;
                    }
                    if(dojo.byId("SupportersInstitution").value!=newAttributes["Supporte_1"]){
                        newAttributes["Supporte_1"]=dojo.byId("SupportersInstitution").value;
                        flag=true;
                    }
                    if(flag==false){
                        alert("内容无变化，无需修改！！")
                        return;
                    }
                    newGraphic = new Graphic(myGraphic.geometry, null, newAttributes);
                    myLayer.applyEdits(null, [newGraphic], null);
                    //myGraphicLayer.clear();
                    flag=false;
                    myLayer=null;
                    myGraphic=null;
                    myResetText();
                    newGraphic=null;
                    newAttributes=null;  
                    alert("修改成功！")                  
                }

                function mySavePoint(){
                    if(newGraphic==null){
                        alert("请先在地图上画新点！");
                        return;
                    }
                    if(dojo.byId("Name").value==""){
                        alert("名字不能为空！！");
                        return;
                    }
                    newAttributes["Name"]=dojo.byId("Name").value;
                    if(dojo.byId("Village").value!="")
                        newAttributes["Village"]=dojo.byId("Village").value;
                    if(dojo.byId("Population").value!="")
                        if(dojo.byId("Population").value>=0 && dojo.byId("Population").value<=100)
                            newAttributes["Population"]=dojo.byId("Population").value;
                        else{
                            alert("请输入数字！");
                            return;
                        }
                    if(dojo.byId("Labor").value!="")
                        if(dojo.byId("Labor").value>=0 && dojo.byId("Labor").value<=100)
                            newAttributes["Labor"]=dojo.byId("Labor").value;
                        else{
                            alert("请输入数字！");
                            return;
                        }
                    var id=dojo.byId("PovertyState");
                    var option=id.options;
                    var value=id.value;
                    var selected=option[value-1].innerHTML;
                    newAttributes["PovertySta"]=selected;
                    if(dojo.byId("Reason").value!="")
                        newAttributes["Reason"]=dojo.byId("Reason").value;
                    if(dojo.byId("PhoneNumber").value!="")
                        newAttributes["PhoneNumbe"]=dojo.byId("PhoneNumber").value;
                    if(dojo.byId("Supporters").value!="")
                        newAttributes["Supporters"]=dojo.byId("Supporters").value;
                    if(dojo.byId("SupportersInstitution").value!="")
                        newAttributes["Supporte_1"]=dojo.byId("SupportersInstitution").value;
                    landusePointLayer.applyEdits([newGraphic], null, null);
                    myGraphicLayer.clear();
                    newGraphic=null;
                    alert("保存成功！");
                }
                function myCancelSave(){
                    dojo.byId("Name").value="";
                    dojo.byId("Village").value="";
                    dojo.byId("Population").value="";
                    dojo.byId("Labor").value="";
                    dojo.byId("Reason").value="";
                    dojo.byId("PhoneNumber").value="";
                    dojo.byId("Supporters").value="";
                    dojo.byId("SupportersInstitution").value="";
                    myGraphicLayer.clear(); 
                    newGraphic=null;                  
                }
                function myResetText(){
                    dojo.byId("Name").value="";
                    dojo.byId("Village").value="";
                    dojo.byId("Population").value="";
                    dojo.byId("Labor").value="";
                    dojo.byId("Reason").value="";
                    dojo.byId("PhoneNumber").value="";
                    dojo.byId("Supporters").value="";
                    dojo.byId("SupportersInstitution").value="";
                }

              });
        </script>

    </head>
    <body>
<div id="mapContainer">
            <nav>
    
                    <div class="title">
                        <img src="img/font.png" alt="">
                    </div>
            
                    <div class="userinfo">
                        <a class="info-list" href="javascript:;">
                            <i class="icon icon-user-tie"></i>
                            <span>联系人:陈旭</span>
                        </a>
                         <!--<a class="info-list" href="javascript:;">
                            <i class="icon icon-r icon-envelop"></i>
                            <div class="noft-red">5</div>
                        </a>-->
                        <a class="info-list" href="javascript:;">
                            <i class="icon iconfont icon-contact"></i>
                          <span>电话:13888315351</span>
                        </a>
                         <!--<a class="info-list" href="javascript:;">
                            <i class="icon icon-cog"></i>
                        
                        </a>-->
            
                        
                    </div>
                    
           </nav>
           <div class="mapdiv" id="mapdiv">
               <div class="container">
                   <div class="top">
                           <div class="jiao"></div>
                           <div class="area form-group">
                              请选择扶贫区域：
                              <select id="fupinfield" class="form-control">
                                <option value="dongchuan">东川区</option>
                                <option value="daguan" selected="selected">大关县</option>
                              </select> 
                          
                            </div>
                            <div id="DivBottom"><a href="javascript:window.history.back(-1);">返回上一层</a></div>
                             
                   </div>
                   <div class="map">
                           <div id="mymap"></div>
                           <div id="SelectAdd" >
                               <div id="property">
                                   <form action="#">
                                       <fieldset>
                                       <legend>ProvertyInformation</legend>
                                           <table>
                                               <tr>
                                                   <td class="txt">*姓名: </td><td><input id="Name" type="text"></td>
                                               </tr>   
                                               <tr>  
                                                   <td class="txt">所属村: </td><td><input id="Village" type="text"></td>
                                               </tr>   
                                               <tr>
                                                   <td class="txt">人口数:</td><td> <input id="Population" type="text"></td>
                                               </tr>   
                                               <tr>
                                                   <td class="txt">劳动力数:</td><td> <input id="Labor" type="text"></td>
                                               </tr>   
                                               <tr>
                                                   <td class="txt">贫困状况:</td>
                                                   <td><select name="" id="PovertyState" >
                                                       <option value="1" selected="true">贫困户</option>
                                                       <option value="2" >脱贫户</option>
                                                   </select></td>
                                               </tr>   
                                               <tr>
                                                   <td class="txt">致贫原因:</td><td><input id="Reason" type="text"></td>
                                               </tr>   
                                               <tr>    
                                                   <td class="txt">电话号码:</td><td><input id="PhoneNumber" type="text"></td>
                                               </tr>   
                                               <tr>
                                                   <td class="txt">挂包人:</td><td><input id="Supporters" type="text"></td>
                                               </tr>   
                                               <tr>    
                                                   <td class="txt">挂包单位:</td><td><input id="SupportersInstitution" type="text"></td>
                                               </tr>                             

                                           </table>

                                   </fieldset> 
                                       <div class="button">
                                           <input id="save" type="button" value="保存" >
                                           <input id="saveChange" type="button" value="修改" >
                                           <input id="reset" type="button" value="重置"> 
                                           <input id="cancel" type="button" value="取消">
                                           <input id="upload" type="button" value="上传" onclick="return myJumper()">
                                           <input id="return" type="button" value="返回" onclick="return dumper()">
                                       </div>

                                   </form>
                               </div>
                               <div id="DivFeature"></div>
                               <div id="DivBottom1" class="none">
                                   <div class="left">
                                        <form id="frm">

                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tbody>
                                        <tr>
                                        <td height="101" align="left">
                                           <div id="localImag"><img id="preview" src="" width="150" height="90" style="display: block; width: 150px; height: 180px;"></div>
                                        </td>
                                        </tr>
                                       
                                        </tbody>
                                        </table>

                                       </form>
                                   </div>
                                   <div class="right">
                                       选择要上传的文件:
                                        <input type="file" name="file" id="doc" style="width:180px;" onchange="javascript:setImagePreview();">
                                        
                                         <input type="button" value="提交" onclick="upload();" />
                                        <br />
                                       <span id="sp"></span> 

                                       <progress id="progressBar" value="0" max="100">

                                       </progress>

                                       <span id="percentage"></span>
                                   </div>
                               </div>

                           </div>
                           <div class="m-navigation-bar m-navigation">
                              <ul class="m-navigation--primary">
                                  <li class="nav-item nav-search">
                                       <span class="nav-item-icon">
                                          <img  title="搜索" class="" src="img/search.png" alt="" onclick=""/ >
                                       </span>
                                       <span class="nav-item-title">搜索</span>
                                       <span class="nav-item-background"></span>
                                  </li>
       
                            
                                  <li class="nav-item nav-select">
                                    <span class="nav-item-icon">
                                       <img  title="选择" class="" src="img/select.png" alt="" onclick=""/ >
                                    </span>
                                    <span class="nav-item-title">选择</span>
                                    <span class="nav-item-background"></span>
                                  </li>
       
                                
                                  <li class="nav-item nav-add">
                                    <span class="nav-item-icon">
                                       <img  title="添加" class="" src="img/add.png" alt="" onclick=""/ >
                                    </span>
                                    <span class="nav-item-title">添加</span>
                                    <span class="nav-item-background"></span>
                                  </li>
       
                               
                                  <li class="nav-item nav-location">
                                    <span class="nav-item-icon" >
                                        <img  title="定位" class="" src="img/location.png" alt="" onclick=""/ >
                                    </span>
                                    <span class="nav-item-title">定位</span>
                                    <span class="nav-item-background"></span>
                                  </li>
       
                              </ul>
                           </div>
                   </div>
               </div>
               
                   
           </div>
           <div class="slider">  
               <ul>
                    <li id="manager"><img src="img/2d.png" style="width:80%;height:80%"><span>2D<br>平面</span></li>
		  	           <li onclick="return myUniqueRender()"><img src="img/xuanran.png" style="width:80%;height:80%"><span>分级<br> 渲染</span></li>
		  	           <li><img src="img/heatmap.png" style="width:80%;height:80%"><span>热度图</span></li>
		  	           <li onclick="return opensand()"><img src="img/3D.png" style="width:80%;height:80%"><span>2/3D联动</span></li>
		  	           <li onclick="return opentimeline()"><img src="img/fupin.png" style="width:80%;height:80%"><span>扶贫  <br>动态</span></li>
               </ul>
        </div>
 </div>
 
    </body>
</html>

